<template>
<div class="report-box">
  <!--面包屑导航-->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>数据统计</el-breadcrumb-item>
    <el-breadcrumb-item>数据报表</el-breadcrumb-item>
  </el-breadcrumb>
  <!--数据展示-->
  <el-card>
    <el-row>
      <el-col>
        <div class="echarts-box" ref="main"></div>
      </el-col>
    </el-row>
  </el-card>
</div>
</template>

<script>
export default {
  name: 'report',
  data(){
    return{
      main:null,
      // 获取报告数据
      option:{}
    }
  },
  created() {
  },
  // dom更新完，初始化图表
  mounted() {
    this.getReport()
  },
  methods:{
    async getReport(){
      const {data: res} =  await this.$http.get(`reports/type/1`)
      if(res.meta.status !== 200) return this.$message.error('获取报告数据失败！')
      console.log('获取报告数据成功', res.data)
      this.option = res.data
      this.chart = this.$echarts.init(this.$refs.main);
      // 使用刚指定的配置项和数据显示图表。
      this.chart.setOption(this.option);
    }
  }
}
</script>

<style lang="scss" scoped>
.echarts-box{
  height: 400px;
}
</style>
